<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>设置密保问题</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="css/all_css.css" />
		<link rel="stylesheet" type="text/css" href="css/weui/base.css" />
		<link rel="stylesheet" type="text/css" href="lib/weui.css" />
		<link rel="stylesheet" type="text/css" href="css/weui/jquery-weui.css" />
		<style type="text/css">
			#findPwd_main {
				max-width: 640px;
				min-width: 320px;
				width: 100%;
				margin: 0px auto;
			}
			
			.app_head_left {
				float: left;
				width: 30%;
				padding-left: 6px;
				padding-top: 6px;
			}
			
			.app_head_left a {
				color: #FFFFFF;
				font-size: 1.5em;
				font-weight: bold;
			}
			
			.app_head_mid {
				float: left;
				width: 40%;
				padding-top: 5px;
			}
			
			.app_head_right {
				float: right;
				width: 30%;
				text-align: right;
				padding: 12px;
			}
			
			.app_head_right a {
				color: #FFFFFF;
				font-size: 1.3em;
				font-weight: bold;
				font-family: "黑体";
			}
			
			#app_head_title {
				text-align: center;
				color: #FFFFFF;
				font-size: 1.6em;
				font-family: "宋体";
				font-weight: bold;
			}
			
			.inputAndBtn {
				width: 94%;
				height: 55px;
				margin-left: 3%;
				margin-right: 3%;
				border: 1px solid #E9E9E9;
				border-radius: 8px;
				font-size: 0.9em;
			}
			/*----输入框----*/
			
			#findPwd_main input[type=text] {
				width: 100%;
				border: none;
				outline: none;
				height: 100%;
				border-radius: 8px;
				font-size: 1.3em;
				color: #CDCDCD;
				padding-left: 1em;
			}
			/*----密保问题段落----*/
			
			.questionPwd {
				/*border: 1px solid;*/
				color: #0070B4;
				text-align: left;
				height: 25px;
				font-size: 1.35em;
				font-family: "黑体";
				width: 90%;
				margin-left: 17px;
				margin-top: 15px;
				margin-bottom: 10px;
			}
			/*----提交按钮----*/
			
			.btnBottom {
				max-width: 640px;
				min-width: 320px;
				margin: 0px auto;
				width: 100%;
				margin-top: 55px;
				/*position: fixed;*/
				text-align: center;
			}
			
			.myRegister {
				font-size: 1.2em;
				width: 40%;
				height: 45px;
				border-radius: 20px;
				display: block;
				background-color: #0070B4;
				text-align: center;
				line-height: 45px;
				color: #FFFFFF;
				font-family: Tahoma, fzltxhk, "\5fae\8f6f\96c5\9ed1";
			}
			
			.mycannotRegister {
				font-size: 1.2em;
				width: 40%;
				height: 45px;
				border-radius: 20px;
				display: block;
				background-color: #DCDCDC;
				text-align: center;
				line-height: 45px;
				color: #FFFFFF;
				font-family: Tahoma, fzltxhk, "\5fae\8f6f\96c5\9ed1";
			}
			
			.close-select {
				color: #FFFFFF !important;
			}
			
			.weui_icon_checked {
				display: none;
			}
			
			.toolbar-inner {
				FILTER: progid: DXImageTransform.Microsoft.Gradient(gradientType=0, startColorStr=#0070B4, endColorStr=#32C7F2);
				/*IE*/
				background: -moz-linear-gradient(top, #0070B4, #32C7F2);
				/*火狐*/
				background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0070B4), to(#32C7F2));
				/*谷歌*/
				background-image: -webkit-gradient(linear, left bottom, left top, color-start(0, #0070B4), color-stop(1, #32C7F2));
				/* Safari & Chrome*/
				filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#0070B4', endColorstr='#32C7F2');
				/*IE6 & IE7*/
				-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#0070B4', endColorstr='#32C7F2')";
				/* IE8 */
			}
			
			.title {
				color: #FFFFFF !important;
				font-size: 1.3em !important;
			}
			
			.primary {
				color: #0070B4 !important;
			}
			/*---遮罩层---*/
			
			.opacity {
				opacity: 0.7;
				filter: alpha(opacity=30);
				background-color: #000;
			}
			
			.mask {
				z-index: 20;
				position: fixed;
				height: 100%;
				width: 100%;
			}
			
			html,
			body {
				height: 100%;
				overflow-y: hidden;
			}
			
			#MBWT1 {
				margin-top: 80px;
			}
			
			.index_head {
				z-index: 9 !important;
			}
		</style>
	</head>

	<body ontouchstart>
		<div class="mask opacity" id="opacityDiv" style="display: none;"></div>
		<div id="findPwd_main">
			<div class="index_head">
				<div class="app_head_left">
					<a href="my.html" class="iconfont">&#xe6d4;</a>
				</div>
				<div class="app_head_mid">
					<p id="app_head_title">密保问题</p>
				</div>
			</div>

			<!--密保问题1-->
			<p class="questionPwd" id="MBWT1">点击选择问题1</p>
			<div class="inputAndBtn">
				<input type="text" name="" id="Qus1" placeholder="请填写密保答案1" />
			</div>
			<!--密保问题2-->
			<p class="questionPwd" id="MBWT2">点击选择问题2</p>
			<div class="inputAndBtn">
				<input type="text" name="" id="Qus2" placeholder="请填写密保答案2" />
			</div>
			<!--提交按钮-->
			<div class="btnBottom">
				<a href="javascript:;" class="myRegister" id="submitQus" style="display: none;">提&nbsp;&nbsp;交</a>
				<a href="javascript:;" class="mycannotRegister" id="cannotSubmitQus">提&nbsp;&nbsp;交</a>
			</div>
		</div>

		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/weui/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
		<!--<script src="js/pwdQus.js" type="text/javascript" charset="utf-8"></script>-->
		<script src="js/back_end.js" type="text/javascript" charset="utf-8"></script>
		<script src="libs/crypto-js.js" type="text/javascript" charset="utf-8"></script>
		<script src="libs/aes.js" type="text/javascript" charset="utf-8"></script>
		<script src="libs/pad-zeropadding.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="libs/encryption.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(".questionPwd").each(function(i) {
				var t = $(this);
				t.select({
					title: "请选择密保问题",
					items: [{
						title: "您母亲的姓名是？",
						value: "01"
					}, {
						title: "您父亲的姓名是？",
						value: "02"
					}, {
						title: "您爱人的姓名？",
						value: "03"
					}, {
						title: "您的出生地是？",
						value: "04"
					}, {
						title: "您高中班主任的名字是？",
						value: "05"
					}, {
						title: "您初中班主任的名字是？",
						value: "06"
					}, {
						title: "您小学班主任的名字是？",
						value: "07"
					}, {
						title: "您的小学校名是？",
						value: "08"
					}, {
						title: "您的学号（或工号）是？",
						value: "09"
					}, {
						title: "您父亲的生日是？",
						value: "10"
					}, {
						title: "您母亲的生日是？",
						value: "11"
					}],
					onChange: function(d) {
						if(i == 0) {
							//当点击选择问题1时
							if(d.titles == t.next().next().html()) {
								//当两个密保问题选择重复时 弹出警告框
								$.alert("请您选择不同的密保问题", "提示", function() {
									//点击确认后的回调函数
									t.click();
								});
							} else {
								//展示第一个选择的问题
								t.html(d.titles);
								//
							}
						} else {
							//当点击选择问题2时
							if(d.titles == t.prev().prev().html()) {
								//当两个密保问题选择重复时 弹出警告框
								$.alert("请您选择不同的密保问题", "提示", function() {
									//点击确认后的回调函数
									t.click();
								});
							} else {
								//展示第二个选择的问题
								t.html(d.titles);
							}
						}
					},
					onOpen: function() {
						//弹窗打开时 显示遮罩层
						$("#opacityDiv").show();
					},
					onClose: function() {
						//弹窗关闭时 隐藏遮罩层
						$("#opacityDiv").hide();
					}
				});
				t.next().children().keyup(function() {
					var Input1 = document.getElementById("Qus1");
					var Input2 = document.getElementById("Qus2");
					if(Input1.value != "" && Input2.value != "" && $("#MBWT1").html().indexOf("点击选择问题") == -1 && $("#MBWT2").html().indexOf("点击选择问题") == -1) {
						$("#cannotSubmitQus").hide();
						$("#submitQus").show();
					} else {
						$("#submitQus").hide();
						$("#cannotSubmitQus").show();
					}
				});
			});
			//设置密保问题 向后台提交密保问题及答案
			$("#submitQus").click(function() {
				//加密
				var userName = JSON.parse(localStorage.userJson)[0].username;
				var n1 = $("#MBWT1").html();
				var n2 = $("#Qus1").val();
				var n3 = $("#MBWT2").html();
				var n4 = $("#Qus2").val();
				var allData = "USERNAME:" + userName + ",MBWT:" + n1 + ",MBDA:" + n2 + ",MBWT1:" + n3 + ",MBDA1:" + n4;
				allData = encrypt(allData);
				$.ajax({
					type: "post",
					url: Url,
					data: {
						"type": "set_security",
						"DATA": "" + allData + ""
					},
					async: false,
					cache: false,
					dataType: "jsonp", //数据类型为jsonp
					jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数  
					jsonpCallback: "jsonpCallback1",
					success: function(data) {
						console.log(data);
						$.alert("设置成功", function() {
							window.location.href = "my.html";
						});
					},
					error: function(data) {
						$.alert("连接超时，请稍后再试", "提示");
					}
				});
			});
		</script>
	</body>

</html>